<template>
    <UserBar></UserBar>
    <div style="display: flex;height: 100vh;">
        <Videos class="videoArea"></Videos>
        <Player class="playerArea"></Player>
        <Config class="configArea"></Config>
    </div>
    <Mask></Mask>
</template>

<script setup lang="ts">
import Videos from "../components/Videos.vue"
import Player from "../components/Player.vue"
import Config from "../components/Config.vue"
import Mask from "../components/Mask.vue"
import UserBar from "../components/userBar.vue"

</script>

<style scoped>
.videoArea {
    width: 20%;
}

.playerArea {
    width: 60%;
}

.configArea {
    width: 20%;
}
</style>